<!DOCTYPE html>
<head>
<style>
@font-face {
  font-family: Ahem;
  src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, the red text "Hello World" should be tightly contained inside the two thin red lines.</p>
<canvas id="canvas" width="300" height="50"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var text = "Hello World";
ctx.font = "50px Ahem";
ctx.fillStyle = '#FF0000';
ctx.textBaseline = "top";
ctx.fillText(text, 1, 0);
var textMetrics = ctx.measureText(text);
ctx.fillRect(0, 0, 1, 50);
ctx.fillRect(Math.ceil(textMetrics.width), 0, 1, 50);
</script>
</body>
